<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义js对象</title>
</head>
<body>
<table border="1px">
    <caption>商品表</caption>
    <tr>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>商品库存</th>
    </tr>

</table>

<script>
    let p3 = [
        {title: '小米16', price: 3333, num: 15},
        {title: '华为Mate 50', price: 4444, num: 8},
        {title: '苹果iPhone 14', price: 5555, num: 20},
        // 注意：以下对象与p3中的对象重复，应不会被添加
        {title: '小米15', price: 2222, num: 10},
        {title: '小米15', price: 2222, num: 10, extra: '这是一个额外的属性，但比较时不应考虑它'} // 即便有额外属性，也应视为重复
    ]
    let tableE = document.querySelector('table');
    for(let i=0;i<p3.length;i++){

        let trE = document.createElement('tr');
        let nameTd = document.createElement('td');
        let priceTd = document.createElement('td');
        let numTd = document.createElement('td');
        nameTd.innerHTML=p3[i].title;
        priceTd.innerHTML=p3[i].price;
        numTd.innerHTML=p3[i].num;
        trE.append(nameTd,priceTd,numTd);
        tableE.append(trE);

    }

    //js对象可以有属性，也可以有方法体
    let p1={
        name:'张三',
        age:16,
        say:function (){
            console.log('hello,my name is'+this.name)
        }
    };
    console.log(p1)
    p1.say();
    //2.先定义一个空对象，再添加属性和方法
    let p2={};
    p2.name='lkp';
    p2.age=88;
    p2.eat=function (){
        console.log('lkp爱吃')
    }
    //3.定义一个数组

    console.log(p3);
    console.log(p3[2])
</script>
</body>
</html>